<template>
  <div>
    <input type="text" v-model="message" placeholder="消息">
    <div class="message">{{ reversedMessage }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello world!"
    };
  },
  computed: {
    reversedMessage: function() {
      // `this` 指向 vm 实例
      return this.message
        .split("")
        .reverse()
        .join("");
    }
  }
};
</script>

<style>
.message {
  font-size: 20px;
}
</style>